<template>
	<view class="th-login-input-box">

		<slot></slot>

		<input class="input-box" :style="{'max-width': type=='code'?'250rpx':''}" v-model="content" :placeholder="placeHolder" :maxlength="maxlength" :type="inputType"
			:placeholder-style="placeStyle"></input>
		<image v-if="content.length>0" class="image-del" src="../../static/element/element-del.png" @tap="del">
		</image>

		
		<view v-if="type=='code'" class="text-code" @tap="sendCode">{{desc}}</view>



	</view>
</template>

<script>
	export default {
		name: "th-login-input",
		data() {
			return {
				countDown: 10,
				interval: undefined,
				desc: '获取验证码',
				maxlength: -1,
				content: '',
				inputType: 'number',
				placeStyle: 'font-size: 34rpx;font-family: PingFang-SC-Medium, PingFang-SC;color: #999999;line-height: 48rpx;'

			};
		},
		props: {
			placeHolder: {
				type: String,
				default: '请输验证码'
			},
			value: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'text'
			},
			time: {
				type: String,
				default: '60'
			}

		},
		watch: {
			value: {
				handler(newValue, oldValue) {
					this.content = newValue
				},
				immediate: true
			},
			type: {
				handler(newValue, oldValue) {
					if (['text', 'number', 'safe-password', 'password', 'digit', 'idcard', 'nickname'].indexOf(newValue) !=
						-1)
						this.inputType = newValue == 'phone' || newValue == 'code' ? 'number' : newValue
					this.maxlength = newValue == 'phone' ? 11 : -1
				},
				immediate: true
			},
			time: {
				handler(newValue, oldValue) {
					this.countDown = newValue
				},
				immediate: true
			},
		},

		beforeDestroy() {
			if (this.interval != undefined)
				clearInterval(this.interval)
		},
		methods: {

			getContent() {
				return this.content
			},

			del() {
				this.content = ''
			},
			sendCode() {
				if (this.interval != undefined)
					return
				this.$emit('code')



			},
			startInterval() {

				this.interval = setInterval(() => {
					this.countDown--
					this.desc = `${this.countDown}s后重新获取`
					if (this.countDown == 0) {
						clearInterval(this.interval)
						this.interval = undefined
						this.countDown = this.time
						this.desc = '获取验证码'
					}
				}, 1000)
			}
		}
	}
</script>

<style scoped lang="scss">
	.th-login-input-box {
		position: relative;
		width: 100%;
		min-height: 100rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #F8F8F8;
	

		.input-box {
			flex: 1;
			text-align: left;
			margin-left: 22rpx;
			font-size: 34rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			// font-weight: 500;
			color: #333333;
			line-height: 48rpx;
			border: 0px;
			outline: none;
		}

		.image-del {
			width: 28rpx;
			height: 28rpx;
			margin-right: 5rpx;
			margin-left: 15rpx;
		}
	}

	.text-code {
		position: absolute;
		right: 0;
		font-size: 34rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #D0021B;
		white-space: nowrap;
		line-height: 48rpx;
		margin-left: 15rpx;
		min-width: 200rpx;
		text-align: center;
	}
</style>